<template>
<div class="boot">
    <swiper :options="swiperOption">
        <swiper-slide><img class="img" alt="#" src="../../assets/image/home/homeSwiper/1.png"></swiper-slide>
        <swiper-slide><img class="img" alt="#" src="../../assets/image/home/homeSwiper/2.png"></swiper-slide>
        <swiper-slide><img class="img" alt="#" src="../../assets/image/home/homeSwiper/3.png"></swiper-slide>
        <swiper-slide><img class="img" alt="#" src="../../assets/image/home/homeSwiper/4.png"></swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
    <div class="clear"></div>
</div>
</template>

<script>
export default {
    name: "TopicSwiper",
    data() {
        return {
            swiperOption: {
                autoplay: {
                    delay: 3000,
                    observer: true, //修改swiper自己或子元素时，自动初始化swiper
                    observeParents: true, //修改swiper的父元素时，自动初始化swiper

                },

                pagination: {
                    el: ".swiper-pagination",
                    dynamicBullets: true
                }
            }
        };
    }
};
</script>

<style scoped>
.boot {
    margin-top: 0;
    font-size: .4rem;

}

.img {
    width: 100%
}

.clear {
    clear: both;
}
</style>
